@import "base";

/** 初始化全局标签 **/
body{ line-height: 24px; color: #000000; font: 14px "Microsoft YaHei",Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;}
hr{height: 1px; margin: 10px 0; border: 0; clear: both;}
a{ color: #000000; .lh(20px); font: 14px "Microsoft YaHei",Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif; text-decoration:none; }
a:hover{color: #777; text-decoration:none;}
a cite{font-style: normal; *cursor:pointer;}
em { font-style: normal; }
div,p,h1,h2,h3,h4,h5,h6 { margin: 0;padding: 0; }
ul, li { margin: 0;padding: 0; list-style: none; display: inline-block; vertical-align: top; }
html,body,.main { .wh; overflow: hidden; }
.lf { float: left; } .rig { float: right; }
i { vertical-align: top; }
::-webkit-scrollbar{ display:none; }
.main { position: relative; }
.main-side { .bg(#F0F3F7); .pa; top: 64px; left: 240px; right: 0; bottom: 0; z-index: 99; .boxs; width: auto; height: auto; }
.main-side { overflow-y: scroll; }
.main-inner {  padding: 24px; }
input { .border(#D9D9D9); .bradius(4px); outline: 0; padding: 0; }
input:focus { box-shadow: 0 0 5px #ccc; }
input::-webkit-input-placeholder{ .cb25; }
input::-moz-input-placeholder{ .cb25; }
input::-ms-input-placeholder{ .cb25; }
textarea::-webkit-input-placeholder{ .cb25; }
textarea::-moz-input-placeholder{ .cb25; }
textarea::-ms-input-placeholder{ .cb25; }



/************************************************************************/
/************************************************************************/
/** 左侧导航栏 **/
.nav { width: 240px; height: 100%; .bg(#002140); overflow-y: scroll; }
.nav-logo { height: 64px; .center; a { .lh(64px); .fzz(18px); .c; } img { width: 25px; .mr(12px); .mt(-5px); vertical-align: middle; } }

.nav-main {
 >li { .wh; }
 >li i { display: inline-block; text-align: center; vertical-align: top; .wh(30px,54px); }
 >li a { .c(#FFFFFF); .cw65(); .lh(54px); padding-left: 50px-26; .diA; .boxs; }
 .nav-arrow {
   font-size: 12px; .rig; width: 50px;
 }
 .nav-subfield { .wh; }
 .nav-subfield li { .wh;  a { padding-left: 70px; .bg(#000C17); .lh(40px); .diA; .transition; } a:hover { .bg(#1890FF); .cw100; } }
 .nav-item {
   height: 54px; overflow: hidden;
 }
 .nav-cur {
   height: 100%; overflow: visible;
   >a { .cw100; .nav-arrow { .transform(rotate(-180deg)); } }
 } 
}


/************************************************************************/
/************************************************************************/
/** 右侧上方 用户信息栏 **/
.usermsg { position: absolute; left: 240px; height: 64px; top: 0; right: 0; 
 padding: 20px; .boxs; box-shadow: 0px -1px 3px 0px #E5E5E5 inset;
 >div { height: 24px; }
 .lf { .pi; i { .fzz(20px); } }
 .user-con {  
   li { .ml(27px); .lh(24px); .pi; .cb85; }
   .select { input { .mr(15px); .fzz(12px); .cb65; .border(#ebebeb); padding: 4px 10px 4px 15px; outline: 0; width: 0; opacity: 0; .transition(); } }
   .select:hover input { width: 160px; opacity: 1; }
   .user { a { .cb85; }
     .user-pic { display: inline-block; .wh(24px,24px); overflow: hidden; .bradius(50%); .mr(8px); 
      img { .wh; vertical-align: top; } }
     .user-name { display: inline-block; vertical-align: top; }
   }
 }
}


/************************************************************************/
/************************************************************************/
/** 右侧主体 位置导航 **/
.position {
 padding: 10px 24px 0 24px; .bg;

 .position-list { padding: 10px 0;
   li:last-child { a { opacity: .65; } }
   li:not(:last-child):after { content: '/'; margin: 0 8px; opacity: .45; }
   a { .c(#000000); opacity: .45; }
   a:hover { opacity: .65; }
 }
 .position-name { .fzz(20px); opacity: .85; padding: 10px 0 20px 0; }
 .position-status {
   li { .mr(20px); }
   a { display: inline-block; padding: 11px 16px; opacity: .65; .pr; }
   a:hover,.position-status-cu>a { .c(#1890FF); opacity: 1; }
   a:hover:after,.position-status-cu>a:after { content: ''; .pa; width: 100%; height: 2px; left: 0; bottom: 0; .bg(#1890FF); }
 }
 //返回按钮
 .position-return {
  .diA(76px,32px); .border(#D9D9D9); .bradius(4px); .fzz(14px); .center; .lh(32px); .cb65;
  &:hover { .bg(#ebebeb); .c(#363636); }
 }
 //描述
 .position-desc { padding: 26px 0;
  .pd-icon { .diA(28px,28px); .mr(12px); .lh(28px); .center(); .fzz(18px); .bg(#5BD171); .c; .bradius(3px); }
  .pd-con { .diA(50%,auto);
    h1 { .fzz(20px); .c(85); .fw(600); .mb(10px); }
    div { padding: 10px 0; span:first-child { .cb85; .mr(10px); } span:last-child { .cb65; } }
    .pd-desc-status { .pr; .pal(15px); }
    .pd-desc-status:before { top: 6px; left: 0px; .transform(scale(.7)); }
  }
 }
}


/** 分页按钮 **/
.page-btn {
 width: 100%; .center; .mb(76px);
 li { a { .diA; .lh(32px); } .wh(32px,32px); opacity: .75; .bg; .border(#D9D9D9); .bradius(6px); margin: 0 4px; .pi; }
 li:hover,.page-cur { .c(); .bg(#1890FF); border-color: #1890FF; opacity: 1; a { .c; } }
 .page-prev { .transform(rotate(90deg)); i { font-size: 14px; } }
 .page-next { .transform(rotate(-90deg)); i { font-size: 14px; } }
}


/** 其他 **/
/* 字体变色 */
.font-gray1 { color: #929292 !important; }
.font-gray2 { color: rgba(0,0,0,.85) !important; }
.font-gray { color: #5F5F5F !important; }
.font-red { color: #F5222D !important; }
.font-green { color: #52C41A !important; }
.font-blue { color: #1890FF !important; }
.font-succ { color: #52C41A !important; }
.font-fail { color: #FF4B50 !important; }
/* 变色方框 */
//地域信息颜色
.house-style { .mr(10px); }
.house-blue,.house-green,.house-red,.house-purple { .bradius(3px); padding: 0 6px; }
.house-blue {  .border(#1890FF); .bg(#F3F9FF); .c(#1890FF); }
.house-green { .border(#52C41A); .bg(#F4FCF6); .c(#52C41A); }
.house-red { border: 1px solid #F04864 !important; background-color: #FFF5F7 !important; color: #F04864 !important; }
.house-purple { .border(#8543E0); .bg(#F9F5FE); .c(#8543E0); }
/* 变色小圆点 */
//项目信息小圆点图标
.house-d3-gray:before { content: ''; .pa; .wh(10px,10px); top: 5px; left: 0; background-color: rgba(0, 0, 0, .25); .bradius; }
.house-d3-orange:before { content: ''; .pa; .wh(10px,10px); top: 5px; left: 0; .bg(#FFBF00); .bradius; }
.house-d3-green:before { content: ''; .pa; .wh(10px,10px); top: 5px; left: 0; .bg(#5BD171); .bradius; }
.house-d3-red:before { content: ''; .pa; .wh(10px,10px); top: 5px; left: 0; .bg(#FF1A2E); .bradius; }
.house-d3-blue:before { content: ''; .pa; .wh(10px,10px); top: 5px; left: 0; .bg(#1890FF); .bradius; }

